<html>
<head>
    <title>Test :: Datasources</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/examples/shared/examples.css"/>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.4.0/ext-all-debug.js"></script>

    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/topbar.js"></script>
    <script type="text/javascript" src="../js/widgets.js"></script>

    <link rel="stylesheet" type="text/css" href="../css/stylesheet.css"/>

    <script type="text/javascript">
        Ext.onReady(function() {
            // initialize view
            var dv = new org.systemsbiology.addama.js.widgets.DatasourcesView();

            // load viewport
            new org.systemsbiology.addama.js.widgets.Viewport({ topbarEl: "container_topbar", tabs: [ dv.mainPanel ] });

            // mock tree data
            var databases = [
                { "label": "Database 1", "uri": "/addama/datasources/one" },
                { "label": "Database 2", "uri": "/addama/datasources/two" },
                { "label": "Database 3", "uri": "/addama/datasources/three" }
            ];
            Ext.each(databases, function(item) { item.isDb = true; });
            dv.addNodes(dv.rootNode, databases);

            var tables = [
                { "name": "Table_1", "uri": "/addama/datasources/one/table1" },
                { "name": "Table_2", "uri": "/addama/datasources/one/table2" },
                { "name": "Table_3", "uri": "/addama/datasources/one/table3" },
                { "name": "Table_4", "uri": "/addama/datasources/one/table4" }
            ];
            Ext.each(tables, function(item) { item.isTable = true; });
            dv.treePanel.on("expandnode", function(node) {
                dv.addNodes(node, tables);
            });

            // force expand and selection of first table
            if (dv.rootNode.firstChild) {
                dv.rootNode.firstChild.expand();
                var firstTable = dv.rootNode.firstChild.firstChild;
                if (firstTable) {
                    dv.selectTable(firstTable)
                }
            }

            // generate and load results
            var genResults = [];
            for (var i = 0 ; i < 100; i++) {
                var row = {};
                for (var j = 0 ; j < 25; j++) {
                    row["f_" + j] = "v_" + i + "_" + j;
                }
                genResults.push(row);
            }
            dv.loadDataGrid(genResults);
        });
    </script>
</head>
<body>
    <div id="container_topbar" class="topbar"></div>
</body>
</html>
